<template>
    <div class="givecomment">
        <div class="comment-bd">
            <div class="comment-card" >
                <card :imgSrc="detail.modelImageUrl" :name="detail.productTitle" style="margin-bottom:.2rem">
                <div class="good-desc">
                    <span class="good-desc-info">{{detail.modelName}} {{detail.modelSize}}</span>
                </div>
                <div class="good-price">
                    <span class="price-icon">￥</span>
                    <span class="good-price-num">{{detail.totalPrice}}</span>
                </div>
                <div class="good-count good-comment" >
                    
                </div>
                </card>
            </div>
       </div>
       <div v-if="status == 'EVALUATION'">
           <div class="inputcomment">
               <group>
                   <x-textarea name="comment" v-model="params.content" placeholder="请输入你的评价~"
                    :max="100"  @on-focus="onEvent('focus')" @on-blur="onEvent('blur')">
                    </x-textarea>
               </group>

           </div>
           <div class="comment-photos">
               <img :src="item.fileUrl" alt="" v-for="(item, index) in params.images" :key="index"/>
               <div class="addimg">
                   <input class="hidden-input" type="file" name="image" accept="image/*" @change="handleSelectPic">
                   <div>+</div>
               </div>
           </div>
           <div class="comment-submit" @click="handleSubmit">提交</div>
       </div>
       <div v-else-if="status == 'COMPLETED'">
           <div class="commnt-content">
               <div class="comment-content_bd">
                   {{eval.content}}
               </div>
               <div v-if="eval.imageList" class="img-item">
                   <img v-for="(item,index) in eval.imageList" :key="index" :src="item.fileUrl" alt="">
               </div>
               <div class="comment-content_time">{{eval.evaluationTime}}</div>

           </div>
       </div>
       
    </div>

</template>
<script>
	import CONSTANT from "../../../wechat/static/constant/urlconstant";
	import common from "../../../wechat/static/common/common";
import card from '../common/Goods-card.vue'
import { XTextarea, Group} from 'vux'
const testimg1 = require('../../images/test.png');
export default {
    data(){
        return{
            goods:[],
            curIndex:true,
	        detail: {},
            eval: {},
            params: {
                content: "",
                images: [],
                itemId: ""
            },
            status: "",
            id:''
        }
    },
    components:{
    card,
    XTextarea,
     Group
  },
   beforeMount(){

   },
    mounted() {
       this.id = this.$router.currentRoute.query.id;
       this.status = this.$router.currentRoute.query.status;
        this.getDetail()
        if(this.id){
            document.title = '评价'
        }
        if (this.status == 'COMPLETED') {
            this.getEvalDetail()
        }
    },
   methods: {
       getDetail() {
           let url = CONSTANT.ORDER.ORDERITEMDETAIL
           common.get(url, this.id, (res) => {
               if (res.code == 200) {
                   this.detail = res.data.bussData
               }
           })
       },
       getEvalDetail() {
           let url = CONSTANT.ORDER.ORDEREVALID
           common.get(url, this.id, (res) => {
               if (res.code == 200) {
                   this.eval = res.data.bussData
               }
           })
       },
       handleSelectPic(e) {
           let url = CONSTANT.UPLOAD.UPLOAD
           common.get(url, e.target.files[0].name+"?contentType="+e.target.files[0].type, (res) =>{
               let data = res.data.bussData;
               common.uploadFile(data.uploadUrl, e.target.files[0], e.target.files[0].type, res => {
                   this.params.images.push({
                       fileKey: data.fileKey,
                       fileUrl: data.downloadUrl
                   })
               });
           })
       },
       handleSubmit() {
           if (!this.params.content) {
               this.$vux.toast.show({
                   type: "cancel",
                   text: "请输入评价！"
               })
               return false
           }
//           if (this.params.images.length == 0) {
//               this.$vux.toast.show({
//                   type: "cancel",
//                   text: "请上传图片！"
//               })
//               return false
//           }
           let url = CONSTANT.ORDER.ORDEREVAL
           this.params.itemId = this.id
           common.post(url, this.params, (res) => {
               if (res.code == 200) {
                   this.$vux.toast.show({
                       type: "success",
                       text: "评价成功"
                   })
                   this.$router.back()
               } else {
                   this.$vux.toast.show({
                       type: "cancel",
                       text: res.data.errMsg
                   })
               }
           })

       },
        onEvent (event) {
          console.log('on', event)
        }
  }
    
}
</script>
<style lang="less">
.givecomment{
    position: relative;
    .card{
        img{
            width: 2rem;
            height: 2rem;
        }
    }
    .comment-bd{
        
        box-sizing: border-box;
        margin-bottom:.2rem;
         .card{
        padding-left:.25rem;
        padding-right:.25rem;
        box-sizing: border-box;
        border-bottom:.01rem solid rgba(238,238,238,.6);
        border-top:.01rem solid rgba(238,238,238,.6);
        .goods-item-content{
          box-sizing: border-box;
          height:2.3rem;
           padding-top:0rem;
        .good-desc{
          .good-desc-info{
            font-size:.26rem;
            font-family:PingFang-SC-Light; 
            color:rgba(158,158,158,1);
            line-height:.5rem;
            margin-right:.2rem;
            }
          }
          .good-price{
            position: absolute;
            bottom:0.1rem;
            color:rgba(126,86,198,1);
            .good-price-num{
              font-size:.31rem;
              font-family:PingFang-SC-Light;
              line-height:.52rem;
            }
          }
          .good-count{
            position:absolute;
            bottom:0.1rem;
            right:0;
            color:#666666;
            font-size: .26rem;
            font-family:PingFang-SC-Medium;
          }
          
        }
      }
    }
    .inputcomment{
            position: relative;
            margin-top: .2rem;
            margin-left: .3rem;
            margin-right: .3rem;
            box-sizing: border-box;
            background:rgba(255,255,255,1);
            outline: none;
            border: none;
            .vux-x-textarea{
                width:6.9rem;
                height:3.6rem;
                padding: 0;
            }
            .weui-cell__bd{
                position: relative;
                  height:3.2rem;
                  padding: .2rem;
                  border:.01rem solid rgba(210,210,210,1);
                  .weui-textarea{
                      /*padding-left: .22rem !important;*/
                      /*padding-top: .38rem !important;*/
                      padding: 0!important;
                      height: 3.2rem;
                  }
               .weui-textarea-counter{
                position: absolute;
                bottom: .2rem;
                right: .27rem;
            }

            }
            

    }
    .comment-photos{
        margin-left: .2rem;
        margin-top: .3rem;
        display: flex;
        align-items: flex-end;
        img{
            display: inline-block;
            width:1.73rem;
            height:1.85rem;
            margin-right: .07rem;
            box-sizing: border-box;
            padding: .29rem .06rem .01rem .1rem;

        }
        .addimg{
            display: inline-block;
            margin-left: .1rem;
            position: relative;
            width:1.57rem;
            height:1.57rem;
            background:rgba(255,255,255,1);
            border:.01rem solid rgba(210,210,210,1);
            font-size:.48rem;
            font-family:PingFangSC-Thin;
            font-weight:100;
            color:rgba(120,120,121,1);
            opacity:0.72;
            text-align: center;
            line-height: 1.57rem;
            .hidden-input {
                position: absolute;
                z-index: 2;
                left: 0;
                width:1.57rem;
                height:1.57rem;
                top: 0;
                opacity: 0;
            }
        }
    }
    .comment-submit{
        margin-top: 2.59rem;
        width:5rem;
        height:.88rem;
        background:rgba(126,86,198,1);
        border-radius:.44rem;
        position: relative;
        text-align: center;
        left: 50%;
        transform: translateX(-50%);
        font-size:.32rem;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(255,255,255,1);
        line-height: .88rem;
    }
    .commnt-content{
        width:6.9rem;
        // height:2.6rem;
        background:rgba(255,255,255,1);
        border:.01rem solid rgba(210,210,210,1);
        padding: .38rem .39rem .3rem  .22rem;
        margin:.2rem .3rem;
        box-sizing: border-box;
        position: relative;
        .img-item{
            overflow: hidden;
        }
        img{
            width:1.73rem;
            height:1.85rem;
            margin-right: .07rem;
            box-sizing: border-box;
            padding: .29rem .06rem .01rem .1rem;
            display: block;
            float: left;
        }
        .comment-content_bd{
            font-size:.28rem;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(85,85,85,1);
            margin-bottom: .35rem;
        }
        .comment-content_time{
            position: relatice;
            padding-left:.1rem;
            margin-top: .3rem;
            font-size:.24rem;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(153,153,153,1);
        }
    }
}
</style>
